<template>
    <div>
        <div>
            <el-row class="titleBackground">
                <el-col :span="16">
                    <el-form inline size="small" style="margin-bottom:-20px">
                        <el-form-item>
                            <el-button size="small" class="title">我的课程({{searchForm.total}})</el-button>
                        </el-form-item>

                        <el-form-item>
                            <el-select v-model="searchForm.courseType" size="small" clearable @change="onSelectChange">
                                <el-option
                                        v-for="item in options"
                                        :label="item.dictName"
                                        :value="item.dictNo">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item  label="快速查询">
                          <el-input v-model="searchForm.namePhone"/>
                        </el-form-item>

                        <el-form-item>
                          <el-button @click="onSearch">查询</el-button>
                        </el-form-item> -->
                    </el-form>


                </el-col>

                <el-col :span="8" style="text-align:right">
                    <el-button class="theme-blue" size="small" @click="toWodeKeCheng">新增课程</el-button>
                    <!--                     <el-button class="theme-blue" size="small" @click="removeKecheng">结束课程</el-button>-->
                    <!-- <el-button type="primary" size="small">球员审核列表</el-button> -->
                </el-col>
            </el-row>

            <el-row style="margin-top:10px">
                <el-col :span="24">
                    <el-table
                            ref="multipleTable"
                            stripe
                            :data="tableList"
                            style="width: 100%"
                            @selection-change="selectChange"
                    >

                        <el-table-column type="selection" width="55">
                        </el-table-column>

                        <el-table-column
                                label="序号"
                                type="index"
                                width="50"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="课程"
                                prop="name"
                                align="center">
                            <template slot-scope="scope">
                                <!--                                <img-->
                                <!--                                        :src="scope.row.imgs|filtersImg"-->
                                <!--                                        alt-->
                                <!--                                        style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"-->
                                <!--                                >-->
                                <!--                                {{ scope.row.name }}-->
                                <div class="qiuyuan">
                                    <img width="50" height="50" :src="scope.row.imgs|filtersImg" alt="">
                                    <span>{{scope.row.name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="时间"
                                prop="startTime"
                                width="180"
                                align="center">
                            <template slot-scope="scope">
                                {{ scope.row.startTime|filtertime }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="当前状态"
                                prop="type"
                                align="center">
                            <template slot-scope="scope">
                                {{ scope.row.type|filtertype }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="课程学员"
                                prop="count"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="课程类型"
                                prop="courseTypeName"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="分组"
                                prop="groupingName"
                                align="center">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="inDetail" @click="editDetail(scope)">查看详情</span>&nbsp;
                                <span class="inDetail" @click="removeKecheng(scope)">移除课程</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <br>
                    <el-pagination
                            background
                            style="float:right"
                            @current-change="pageChange"
                            layout="prev, pager, next"
                            :total="searchForm.total">
                    </el-pagination>

                    <span style="float:right;padding-top:6px;">共{{searchForm.total}}门课程，每页{{searchForm.pageSize}}门课程</span>

                    <div style="clear:both"></div>
                    <br>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="结束课程" :visible.sync="deleteDialog">
            <el-table
                    ref="multipleTable"
                    stripe
                    :data="selectList"
                    style="width: 100%"
            >

                <el-table-column
                        v-for="(item, index) in header"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                />

            </el-table>

            <br>
            <span style="padding:10px;"><strong>是否移除以上球队？</strong></span>
            <el-button size="small" type="primary" @click="onDelete">确定</el-button>
            <el-button size="small" @click="deleteDialog = false">取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import {baseImgPath, basefile} from '@/config/env.js';

    const header = [
        {prop: 'name', label: '队名'},
        {prop: 'imgs', label: '分组'},
        {prop: 'age', label: '人数'}
    ]

    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    export default {
        components: {},
        data() {
            return {
                header,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [
                    {name: 1, id: 1}
                ],

                options: [
                    {label: '全部', value: 1}
                ],

                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },

                selectList: []
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),

            dateHeader() {
                const date = this.activeDate
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchCourseList',
                'fetchSelectList',
                'removeKeCheng',
            ]),

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            toWodeKeCheng() {
                this.$router.push({name: 'wodekecheng'})
            },

            onSearch() {
                this.searchForm.pageNum = 1
                this.fetchList()
            },

            fetchList() {
                this.searchForm.coachId = this.userStatus.statusId

                for (let i in this.searchForm) {
                    if (i !== 'courseType') {
                        this.searchForm[i] = Number(this.searchForm[i])
                    }
                }
                console.log('1233333');
                this.fetchCourseList(this.searchForm).then(res => {
                    const {code, data: {list, total}} = res
                    console.log(res);
                    if (code === 200) {
                        console.log(list)
                        this.tableList = list || []
                        this.searchForm.total = Number(total)
                    }
                })
            },

            selectChange(val) {
                this.selectList = val
                console.log(this.selectList)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },

            getSelect() {
                this.fetchSelectList({type: 'CT'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },

            removeKecheng(scope) {
                const id = scope.row.id
                const name = scope.row.name

                this.$confirm(`是否移除${name}？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetchRemoveKeCheng(Number(id))
                })
            },

            fetchRemoveKeCheng(id) {
                this.removeKeCheng([{id}]).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.searchForm.pageNum = 1
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                        this.fetchList()
                    }
                })
            },

            onSelectChange(val) {
                this.fetchList()
            },

            editDetail(scope) {
                const {row: {id}} = scope
                this.$router.push({name: 'onlyReadwodekecheng', query: {id}})
            },

            onDelete() {
                console.log(this.selectList)
            }
        },

        created() {
            this.fetchList()
            this.getSelect()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            filtertime: function (data) {
                if (data) {
                    return formatDate(data, 'Y-M-D H:I:S')
                }
                return ''
            },
            // 0 未开课，1开课中，2已结束
            filtertype: function (e) {
                if (e == 0) {
                    return '未开课'
                } else if (e == 1) {
                    return '开课中'
                } else {
                    return '已结束'
                }
            }
        }

    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }

    .qiuyuan {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .qiuyuan img {
        margin-right: 10px;
    }
</style>



